import React, { useState, useEffect } from 'react'
function Child1 () {
  const [userName, setUserName] = useState('')
  useEffect(() => {
    const userName = localStorage.getItem('userName')
    setUserName(userName)
  }, [])
  return (
    <div>
      child1 - { userName }
    </div>
  )
}
function Child2 () {
  const [userName, setUserName] = useState('')
  useEffect(() => {
    const userName = localStorage.getItem('userName')
    setUserName(userName)
  }, [])
  return (
    <div>
      child2 - { userName }
    </div>
  )
}
function App() {
  return (
    <div>
      <Child1 />
      <hr />
      <Child2 />
    </div>
  )
}

export default App
